<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>${subject.title }</title>
<link rel="stylesheet" href="${pageContext.request.contextPath }/resource/css/frozen.css">
<script src="${pageContext.request.contextPath }/resource/js/lib/zeptojs/zepto.min.js"></script>
<script src="${pageContext.request.contextPath }/resource/js/frozen.js"></script>
<script src="${pageContext.request.contextPath }/resource/js/template.js"></script>
</head>
<body>
        <header class="ui-header ui-header-positive ui-border-b">
            <i class="ui-icon-return" onclick="history.back()"></i><h1>${subject.title }</h1><a href="${pageContext.request.contextPath }/subject/list/page"><button class="ui-btn">回列表</button></a>
        </header>
        <section class="ui-container">
	        <section id="notice">
			    <div class="demo-item">
			        <div class="demo-block">
			            <section class="ui-notice">
			                <div class="ui-btn-wrap">
								<img src="${pageContext.request.contextPath }/resource/img/static.jpg" style="max-width: 320px;max-height: 320px;" id="play_img">
							</div>
			                 <div class="ui-notice-btn">
			                	 <div class="ui-btn-group ui-border-t">
						        	<button type="button" class="ui-btn-primary ui-btn-lg" id="playVoice" value="${subject.audioUrl}">播放</button>
						        	<button type="button"  class="ui-btn-primary ui-btn-lg" id="stopVoice" value="${subject.audioUrl}">停止</button>
						         </div>
						    </div>
			            </section>
			        </div>
			    </div>
			</section>
		</section>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript">
		  var voice = {
		    localId: '',
		    serverId: ''
		  };
		$(function() {
			wx.config({
			    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			    appId: '${appId}', // 必填，公众号的唯一标识
			    timestamp: '${timestamp}', // 必填，生成签名的时间戳
			    nonceStr: '${nonceStr}', // 必填，生成签名的随机串
			    signature: '${signature}',// 必填，签名，见附录1
			    jsApiList: ['startRecord', 'stopRecord','onVoiceRecordEnd','playVoice','playVoice',
			               'stopVoice','stopVoice','uploadVoice','downloadVoice','chooseImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			});
			
			wx.ready(function(){
				wx.checkJsApi({
				    jsApiList: ['playVoice','stopVoice'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
				    success: function(res) {}
				});

				// 4.5 播放音频
				document.querySelector('#playVoice').onclick = function() {
					voice.localId = this.value;
					wx.playVoice({
						localId : voice.localId
					});
				};
				
				// 4.6 暂停播放音频
				document.querySelector('#pauseVoice').onclick = function() {
					wx.pauseVoice({
						localId : localId
					});
					$("#msg").html('暂停');
				};

				// 4.7 停止播放音频
				document.querySelector('#stopVoice').onclick = function() {
					voice.localId = this.value;
					wx.stopVoice({
						localId : voice.localId
					});
					$("#msg").html('停止');
				};

				// 4.8 监听录音播放停止
				wx.onVoicePlayEnd({
					complete : function(res) {
						$("#msg").html('播放结束');
					}
				});

			});
			wx.error(function(res) {

			});
		});
	</script>
</body>
</html>